<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<%@ include file="image_data.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
	content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1"
	id="viewport" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet"
	href="${path}/xkh_version_2/css/swiper-3.3.1.min.css" />
<link rel="stylesheet" type="text/css"
	href="${path}/xkh_version_2/css/style.css" />
<link rel="stylesheet"
	href="${path}/xkh_version_2/iconfont/iconfont.css" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="${path}/wapstyle/js/template.js"></script>
<script src="${path}/v2/console/js/jquery-1.9.1.min.js"></script>
<title>校咖汇</title>
</head>
<style>

</style>
<body>
	<div class="person_top">
		<c:choose>
			<c:when
				test="${userInfo.backPicture!=''&&userInfo.backPicture!=null}">
					<c:if test="${flage==false}">
						<img id="backPicUrl" src="${userInfo.backPicture}${person_top}"
							class="search_pic" onclick="changeBack();"/>
					</c:if>
					<c:if test="${flage==true}">
						<img id="backPicUrl" src="${userInfo.backPicture}${person_top}"
							class="search_pic"/>
					</c:if>
			</c:when>
			<c:otherwise>
				<c:if test="${flage==false}">
					<img id="backPicUrl" src="${path}/xkh_version_2/img/per_banner01.jpg"
						class="search_pic" onclick="changeBack();" />
				</c:if>
				<c:if test="${flage==true}">
					<img id="backPicUrl" src="${path}/xkh_version_2/img/per_banner01.jpg"
						class="search_pic"/>
				</c:if>
			</c:otherwise>
		</c:choose>

		<div class="personal_pic">
			<%-- <img src="${path}/xkh_version_2/img/class_picture.png" class="search_pic"  /> --%>
			<img src="${userInfo.headPortrait}" class="search_pic" style="border-radius:100%;"/>
		</div>
		<p class="personal_name">${userInfo.nickname }</p>
		<p class="personal_school">${userInfo.schoolName }</p>
		<span class="iconfont icon-zuobiao person_zuobiao"></span> <span>${userInfo.cityName }</span>
		<span class="iconfont icon-iconset0207"></span> <span>${userInfo.viewNum }</span>
	</div>
	<!--关于他-->
	<div class="person_about">
		<div class="about_line"></div>
		<span class="about_he"><img
			src="${path}/xkh_version_2/img/person_about.png" class="search_pic" /></span>
		<span class="about_him">关于TA</span>
		<div class="about_lineR"></div>
	</div>
	<div class="about_content">${userInfo.aboutMe}</div>
	<div class="about_bg"></div>
	<!--关于技能-->
	<div class="person_about">
		<div class="about_line"></div>
		<span class="about_he"><img
			src="${path}/xkh_version_2/img/person_ablity.png" class="search_pic" /></span>
		<span class="about_him">TA的技能</span>
		<div class="about_lineR"></div>
	</div>
	<c:set var="userInfo.skillInfos" value=" " scope="request"></c:set>
	<c:set var="name" value="证明" scope="request"></c:set>
	<!-- 只有个人的时候循环技能为空时  false prove is own Visit -->
	<%-- <c:if test="${empty userInfo.skillInfos}">
		<c:if test="${!flage}">
			<section>
				<div class="noPublish_pic">
					<img src="${path}/xkh_version_2/img/noPublish.png"
						class="search_pic" />
				</div>
			</section>
			<footer>
				<form id="form1" class="enter_form" action="${path }/skillUser/toAddSkill.html" method="post">
					<button onclick="sub();">立即发布</button>
				</form>
			</footer>
		</c:if>
	</c:if> --%>

	<c:forEach var="skillInfo" items="${userInfo.skillInfos}">
		<a href="${path}/home/getSkillInfo.html?id=${skillInfo.id}" class="switch_content">
			<div>
			<h3 class="switch">${skillInfo.className}</h3>
			</div>
		</a>
		<%-- <a href="${path}/home/getSkillInfo.html?id=${skillInfo.id}" class="ablity">
			<h3>${skillInfo.className}</h3>
		</a> --%>
		<div class="pic_content" style="margin-top:20px;">
			<div class="about_pic">
				<div id="sliderSegmentedControl">
					<img src="${skillInfo.images[0].imgUrl}${person_kill}"
						class="search_pic" />
					<c:forEach var="image" items="${skillInfo.images}" begin="0">
						<input type="hiden" style="display: none" src="${image.imgUrl}">
					</c:forEach>
				</div>
			</div>
		</div>
		<a class="person_box"
			href="${path}/home/getSkillInfo.html?id=${skillInfo.id}">
			<div class="about_sell">
				<span class="about_dance">${skillInfo.skillName}</span>
				<div class="diamond_content">
					<div class="about_diamond">
						<img src="${path}/xkh_version_2/img/icon_diamond.png"
							class="search_pic" />
					</div>
					<div class="num1">
						<span>${skillInfo.skillPrice}</span>元/次
					</div>
				</div>
			</div>

			<div class="about_box">
				<div class="about_number">
					<span>已售</span> <span>[${skillInfo.viewNum }]</span>
				</div>
				<div class="about_star">
					<span class="iconfont icon-xingxing"></span> <span
						class="iconfont icon-xingxing"></span> <span
						class="iconfont icon-xingxing"></span> <span
						class="iconfont icon-xingxing"></span> <span
						class="iconfont icon-xingxing"></span>
				</div>
				<span class="service_leibie"> <c:if
						test="${skillInfo.serviceType == '1'}">
			线上服务
			</c:if> <c:if test="${skillInfo.serviceType == '2'}">
			线下服务
			</c:if>
				</span>
			</div>
			<div class="about_bgC"></div>
		</a>
		<!--  </a> -->
	</c:forEach>

	<!--底部条   区别自己点入还是旁人点入    2.0不做，放在下一版 -->
	
	<%-- <c:if test="${flage}">
		<div class="about_bottom">客服介入</div>
	</c:if> --%>
	<input type="hidden" id="basId" name="id" value="${id}" />
</body>
<script>
		var baseP = "<%=basePath%>";
		var title=document.title;
		window.onload=function(){
			 //获取当前浏览器url全路径,如: http://zhoubang85.com/chooseWXPay.jsp
	        var client = window.location.href;
	        var rPath='<%=contextPath%>/skillUser/getJSConfig.html';
			//请求后台，获取jssdk支付所需的参数
			$.ajax({
				type : 'post',
				url : rPath,
				dataType : 'json',
				data : {
					"clientUrl" : client
				//当前页面所在的浏览器URL全路径,由于该支付为jssdk支付，所以需要url地址.参与后台sign签名
				},
				cache : false,
				error : function() {
					alert("系统错误，请稍后重试");
					return false;
				},
				success : function(data) {
					//微信支付功能只有微信客户端版本大于等于5.0的才能调用
					var return_date = eval(data);
					if (parseInt(data[0].agent) < 5) {
						alert("您的微信版本低于5.0无法使用微信支付");
						return;
					}
					//JSSDK支付所需的配置参数，首先会检查signature是否合法。
					wx.config({
						debug : !true, //开启debug模式，测试的时候会有alert提示
						appId : return_date[0].appId, //公众平台中-开发者中心-appid
						timestamp : return_date[0].config_timestamp, //时间戳
						nonceStr : return_date[0].config_nonceStr, //随机字符串,不长于32位
						signature : return_date[0].config_sign, //这里的signature是后台使用SHA1签名算法得出，不是MD5，与下面的wx.chooseWXPay中的paySign不同，下面的paySign是后台使用MD5加密得出
						jsApiList : [ 'onMenuShareAppMessage','onMenuShareTimeline' ]
					});
	
					//上方的config检测通过后，会执行ready方法
					wx.ready(function() {
						
						wx.onMenuShareAppMessage({
						    title: title, // 分享标题
						    desc: "校咖汇,校园资源共享平台!", // 分享描述
						    link: client, // 分享链接
						    imgUrl: baseP+'wapstyle/img/logosss.png', // 分享图标
						    type: '', // 分享类型,music、video或link，不填默认为link
						    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						    success: function () { 
						        // 用户确认分享后执行的回调函数
						    },
						    cancel: function () { 
						        // 用户取消分享后执行的回调函数
						    }
						});
						wx.onMenuShareTimeline({
						    title: title, // 分享标题
						    desc: "校咖汇,校园资源共享平台!", // 分享描述
						    link: client, // 分享链接
						    imgUrl: baseP+'wapstyle/img/logosss.png', // 分享图标
						    type: '', // 分享类型,music、video或link，不填默认为link
						    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						    success: function () { 
						        // 用户确认分享后执行的回调函数
						    },
						    cancel: function () { 
						        // 用户取消分享后执行的回调函数
						    }
						});
	
	
					});
					wx.error(function(res) {
						//alert(res.errMsg);
					});
				}
			});
			
		};
		
	</script>
<script type="text/javascript">

	function sub(){
		alert(0)
		$("#form1").submit();
		}

	$('#sliderSegmentedControl').click(function(){
		var myArray=new Array();
		var obj_this = this.children[0].src;
		var obj_parent = this.parentNode;
		var obj_child =obj_parent.getElementsByTagName("input");
		for(var i=0;i<obj_child.length;i++){
			myArray[i]=obj_child[i].src;
		}
		
		//获取当前浏览器url全路径,如: http://zhoubang85.com/chooseWXPay.jsp
        var clientUrl = window.location.href;
        var reqPath='<%=contextPath%>/skillUser/getJSConfig.html';
		//请求后台，获取jssdk支付所需的参数
		$.ajax({
			type : 'post',
			url : reqPath,
			dataType : 'json',
			data : {
				"clientUrl" : clientUrl
			//当前页面所在的浏览器URL全路径,由于该支付为jssdk支付，所以需要url地址.参与后台sign签名
			},
			cache : false,
			error : function() {
				alert("系统错误，请稍后重试");
				return false;
			},
			success : function(data) {
				//微信支付功能只有微信客户端版本大于等于5.0的才能调用
				var return_date = eval(data);
				
				if (parseInt(data[0].agent) < 5) {
					alert("您的微信版本低于5.0无法使用微信支付");
					return;
				}
				//JSSDK支付所需的配置参数，首先会检查signature是否合法。
				wx.config({
					debug : false, //开启debug模式，测试的时候会有alert提示
					appId : return_date[0].appId, //公众平台中-开发者中心-appid
					timestamp : return_date[0].config_timestamp, //时间戳
					nonceStr : return_date[0].config_nonceStr, //随机字符串,不长于32位
					signature : return_date[0].config_sign, //这里的signature是后台使用SHA1签名算法得出，不是MD5，与下面的wx.chooseWXPay中的paySign不同，下面的paySign是后台使用MD5加密得出
					jsApiList : [ 'previewImage' ]
				});

				//上方的config检测通过后，会执行ready方法
				wx.ready(function() {
					wx.previewImage({
					    current: obj_this, // 当前显示图片的http链接
					    urls: myArray // 需要预览的图片http链接列表
					});
				});
				wx.error(function(res) {
					//alert(res.errMsg);
				});
			}
		});				        
		
	});
	
	

	/*选择图片*/
function changeBack() {
    var clientUrl = window.location.href;
    var reqPath='<%=contextPath%>/skillUser/getJSConfig.html';
	//请求后台，获取jssdk支付所需的参数
	$.ajax({
		type : 'post',
		url : reqPath,
		dataType : 'json',
		data : {
			"clientUrl" : clientUrl
		//当前页面所在的浏览器URL全路径,由于该支付为jssdk支付，所以需要url地址.参与后台sign签名
		},
		cache : false,
		error : function() {
			alert("系统错误，请稍后重试");
			return false;
		},
		success : function(data) {
			//微信支付功能只有微信客户端版本大于等于5.0的才能调用
			var return_date = eval(data);
			if (parseInt(data[0].agent) < 5) {
				alert("您的微信版本低于5.0无法使用微信支付");
				return;
			}
			//JSSDK支付所需的配置参数，首先会检查signature是否合法。
			wx.config({
				debug : false, //开启debug模式，测试的时候会有alert提示
				appId : return_date[0].appId, //公众平台中-开发者中心-appid
				timestamp : return_date[0].config_timestamp, //时间戳
				nonceStr : return_date[0].config_nonceStr, //随机字符串,不长于32位
				signature : return_date[0].config_sign, //这里的signature是后台使用SHA1签名算法得出，不是MD5，与下面的wx.chooseWXPay中的paySign不同，下面的paySign是后台使用MD5加密得出
				jsApiList : [ 'chooseImage','uploadImage','downloadImage' ]
			});
			//上方的config检测通过后，会执行ready方法
			wx.ready(function() {
				wx.chooseImage({
				    count: 1, // 默认9
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				    success: function (res) {
				        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
				       // alert("localIds"+localIds[0]);
				        var localArr= res.localIds; 
				        
				        if(localArr.length >0){
					   	 wx.uploadImage({
					           localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
					           isShowProgressTips: 1, // 默认为1，显示进度提示
					           success: function (res) {
					               var serverId = res.serverId; // 返回图片的服务器端ID
					              // alert("serverId="+serverId);
					               
					               $.ajax({
					              	type : "post",
					              	url : "<%=contextPath%>/skillUser/downloadImageBackPic.html",
					       			dataType : "json",
					       			data : {
					       				serverId : serverId,
					       				id : $("#basId").val()
					       			},
					       			success : function(data) {//success后添加heidden的input用于保存上传服务器返回地址(删除图片,添加img,添加保存地址,保存时获取值)
					       				//alert("path="+data.path);
					       				$("#backPicUrl").attr("src", data.path);
					       			}
					       		});
					           }
					       });
				        }
				    }
				});
			});
			wx.error(function(res) {
				alert(res.errMsg);
			});
		}
	});
}



/* function downloadImage(wx,serverId){
	
} */
</script>
</html>
